<template>
  <div class="utilize">
    <div class="head-search">
      <el-form :inline="true" :model="searchData" ref="ruleForm">
        <el-form-item label="时间：">
          <el-date-picker
            v-model="searchData.value"
            type="daterange"
            align="right"
            size="small"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="getEchartsData" type="primary" size="small">统计</el-button>
<!--          <el-button type="primary" size="small">生成基础数据</el-button>-->
        </el-form-item>
      </el-form>
    </div>

    <div class="echarts">
      <el-select v-model="value" size="small" placeholder="请选择" @change="getEchartsData">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div id="myChart"></div>
    </div>

    <section class="table-list" >
      <hgroup>
        <label>列表统计</label>
        <!--        <el-button>导出</el-button>-->
      </hgroup>

      <el-table
        :data="tableData"
        border
        show-summary
        :summary-method="getSummaries"
        style="width: 100%">
        <el-table-column
          prop="category"
          fixed="left"
          width="140px"
          label="门类">
        </el-table-column>

        <el-table-column
          prop="gzck"
          label="利用目的">
          <el-table-column
            prop="gzck"
            label="工作参考">
            <el-table-column
              prop="gzck.personNum"
              label="人次">
            </el-table-column>
            <el-table-column
              prop="gzck.jjs"
              label="件卷数">
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop="address"
            label="佐证依据">
            <el-table-column
              prop="zzyj.personNum"
              label="人次">
            </el-table-column>
            <el-table-column
              prop="zzyj.jjs"
              label="件卷数">
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop="address"
            label="职称人事">
            <el-table-column
              prop="zcrs.personNum"
              label="人次">
            </el-table-column>
            <el-table-column
              prop="zcrs.jjs"
              label="件卷数">
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop="address"
            label="拟稿编志">
            <el-table-column
              prop="ngbz.personNum"
              label="人次">
            </el-table-column>
            <el-table-column
              prop="ngbz.jjs"
              label="件卷数">
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop="address"
            label="其他">
            <el-table-column
              prop="qt.personNum"
              label="人次">
            </el-table-column>
            <el-table-column
              prop="qt.jjs"
              label="件卷数">
            </el-table-column>
          </el-table-column>
        </el-table-column>

      </el-table>

    </section>

  </div>
</template>

<script>

import {
  getBasicData,
  getJianStatistics,
  getListStatistics,
  getPeopleStatistics
} from '../../../api/statistics/utilizeStatistics'

export default {
  name: 'UtilizeStatistics',
  // 利用统计
  data () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      searchData: {
        value: []
      },
      value: '人次统计',
      options: [{
        label: '人次统计',
        value: '人次统计'
      }, {
        label: '件卷次',
        value: '件卷次'
      }],
      lineXData: [],
      lineYData: [],
      tableData: []
    }
  },
  mounted () {
  },
  methods: {
    getSummaries (param) {
      // console.log(param)
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map(item => {
          return Number(item[column.property.split('.')[0]][column.property.split('.')[1]])
        })

        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ''
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    },
    getEchartsData () {
      if (this.searchData.value.length < 1) {
        this.$message.warning('请选择时间日期！')
        return
      }
      getBasicData()/* .then(res => {
        console.log(res.data.data)
      }) */
      const query = {
        date1: this.searchData.value[0],
        date2: this.searchData.value[1]
      }
      let request = null
      if (this.value === '人次统计') {
        // 人次信息
        request = getPeopleStatistics({}, query)
      } else {
        // 件卷数信息
        request = getJianStatistics({}, query)
      }
      request.then(res => {
        this.lineXData = []
        this.lineYData = []
        res.data.data.map(item => {
          this.lineXData.push(item.x)
          this.lineYData.push(item.y)
        })
        this.drawLine(this.lineXData, this.lineYData)
      })

      getListStatistics(query).then(res => {
        this.tableData = res.data.data
      })
    },
    drawLine (xData, yData) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表echarts
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(126,199,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(126,199,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(126,199,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        grid: {
          top: '5%',
          left: '10%',
          right: '10%',
          bottom: '15%'
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#233653'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#7ec7ff',
              padding: 16,
              fontSize: 14
            },
            formatter: function (data) {
              return data
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          data: xData
        }],
        yAxis: [{
          name: '',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.2)'
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          lineStyle: {
            normal: {
              width: 4,
              color: 'rgba(25,163,223,1)' // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)'
          },
          itemStyle: {
            color: 'rgba(25,163,223,1)',
            borderColor: '#646ace',
            borderWidth: 2
          },
          tooltip: {
            show: true
          },
          areaStyle: { // 区域填充样式
            normal: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(25,163,223,.3)'

              },
              {
                offset: 1,
                color: 'rgba(25,163,223, 0)'
              }
              ], false),
              shadowColor: 'rgba(25,163,223, 0.5)', // 阴影颜色
              shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: yData
        }]
      })
    }
  }

}
</script>

<style lang="scss" scoped>
  .echarts {
    width: 100%;

    #myChart {
      width: 100%;
      height: 400px;
    }
  }

  .table-list {
    padding-bottom: 30px;
    hgroup {
      line-height: 40px;
      .label{
        width: 100px;
        text-align: center;
      }
    }
    ::v-deep .el-table{
      td, th{
        text-align: center !important;
      }
    }
  }
</style>
